<script setup lang="ts">
import useHospitalInfoStore from "@/store/hospital_info";
import {ref, watch} from "vue";
import {useRoute} from "vue-router";
import {storeToRefs} from "pinia";
import router from "@/router";

const route = useRoute();
//获取医院编号和科室编号
const hoscode = route.query.hoscode
const depcode = route.query.depcode

const page = ref(1)
const limit = ref(6)

const infoStore = useHospitalInfoStore();
infoStore.getHospitalScheduleRuleData(page.value, limit.value, hoscode as string, depcode as string)
//分页操作
const {firstDayInfo, hospitalScheduleDoctor} = storeToRefs(infoStore);
const handleCurrentChange = () => {
  infoStore.getHospitalScheduleRuleData(page.value, limit.value, hoscode as string, depcode as string)
}

//判断是否是即将放号医生信息
const futureData = ref({})
//分别存储上午号源和下午号源医生排班表
const morning = ref([])
const after = ref([])

//获取医生排班数据
watch(firstDayInfo, () => {
      //获取医生排版数据
      infoStore.getHospitalScheduleDoctorData(hoscode as string, depcode as string, infoStore.firstDayInfo.workDate)
    }
)

watch(hospitalScheduleDoctor, () => {
  filterHospitalScheduleData()
})

//记录选中的排班信息
const currentIndex = ref(0)


const changeDoctorSchedule = (item: any, index: number) => {
  futureData.value = item
  currentIndex.value = index
  infoStore.getHospitalScheduleDoctorData(hoscode as string, depcode as string, item.workDate)
}


const filterHospitalScheduleData = () => {
  const filterMorning = infoStore.hospitalScheduleDoctor.filter(item => item.workTime === 0)
  morning.value = filterMorning


  const filterAfter = infoStore.hospitalScheduleDoctor.filter(item => item.workTime === 1)
  after.value = filterAfter
}

//预约挂号第二部，就诊人信息页面
const registerSetUp2 = (item: any) => {
  console.log(item)
  router.push({
    path: "/hospital/register_setup_2",
    query: {
      hosScheduleId: item.id
    }
  })
}


</script>

<template>
  <div class="register-setup">
    <div class="top">
      <p>
        <span>{{ infoStore.hospitalScheduleRule.baseMap?.hosname }}</span>
        <span class="line">|</span>
        <span>{{
            infoStore.hospitalScheduleRule.baseMap?.bigname
          }}<i>.</i>{{ infoStore.hospitalScheduleRule.baseMap?.depname }}</span>
      </p>
    </div>
    <div class="content">
      <h3>{{ infoStore.hospitalScheduleRule.baseMap?.workDateString }}</h3>
      <div class="register-card">
        <template v-for="(item,index) in infoStore.hospitalScheduleRule.bookingScheduleList" :key="index">
          <div class="item" @click="changeDoctorSchedule(item,index)" :class="{active:currentIndex===index}">
            <div class="up" :class="{active: item.status===-1 || item.availableNumber===-1}">
              {{ item.workDate }}{{ item.dayOfWeek }}
            </div>
            <dv class="bottom">
              <div v-if="item.status===-1">停止挂号</div>
              <div v-if="item.status===0">
                {{ item.availableNumber === -1 ? "约满了" : `有号(${item.availableNumber})` }}
              </div>
              <div v-if="item.status===1">即将放号</div>
            </dv>
          </div>
        </template>
      </div>
      <div class="page">
        <!--      分页器-->
        <el-pagination layout="prev, pager, next"
                       :total="infoStore.total"
                       v-model:current-page="page"
                       @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!--号源信息-->
    <div class="doctor-info">
      <div class="future" v-if="futureData.status===1">
        <h2>{{ futureData.workDate }}<span>放号</span></h2>
      </div>

      <div class="now" v-else>
        <div class="morning">
          <div class="tops">
            <svg t="1712995722680" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="10581" width="32" height="32">
              <path
                  d="M93.184 883.968c0-25.6 20.736-46.592 47.36-46.592h742.912c26.112 0 47.36 21.504 47.36 46.592 0 25.6-20.736 46.592-47.36 46.592H140.544c-26.368 0-47.36-21.504-47.36-46.592zM465.408 235.008V138.496c0-25.344 21.504-45.824 46.592-45.824 25.6 0 46.592 21.248 46.592 45.824v96.512c-30.976-3.328-62.208-3.328-93.184 0zM184.576 389.888L127.744 333.056c-17.92-17.92-17.152-47.616 0.512-65.28 18.176-18.176 47.872-17.92 65.28-0.512L250.624 324.096c-24.32 19.456-46.592 41.472-66.048 65.792z m588.8-65.792l56.832-56.832c17.92-17.92 47.616-17.152 65.28 0.512 18.176 18.176 17.92 47.872 0.512 65.28l-56.832 56.832c-19.456-24.32-41.472-46.336-65.792-65.792z m64.512 327.168c0-179.968-145.92-325.888-325.888-325.888s-325.888 145.92-325.888 325.888H46.592c-25.344 0-46.592 20.736-46.592 46.592 0 24.832 20.992 46.592 46.592 46.592h930.56c25.344 0 46.592-20.736 46.592-46.592 0-25.088-20.992-46.592-46.592-46.592h-139.264z m0 0"
                  p-id="10582" fill="#1296db"></path>
            </svg>
            <span style="font-weight: 700">上午号源</span>
          </div>
          <template v-for="(item,index) in morning">
            <div class="dct">
              <div class="left">
                <div class="position">{{ item.title }} | {{ item.docname }}</div>
                <div class="desc">{{ item.skill }}</div>
              </div>
              <div class="right">
                <span class="money">￥{{ item.amount }}</span>
                <el-button type="primary" @click="registerSetUp2(item)">剩余{{ item.availableNumber }}</el-button>
              </div>
            </div>

          </template>
        </div>

        <div class="after">
          <div class="af-tops">
            <svg t="1712995696232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="9514" width="32" height="32">
              <path
                  d="M356.9664 562.7392H762.88a61.44 61.44 0 0 1 61.44 61.44v153.6H295.7824v-153.6a61.44 61.44 0 0 1 61.184-61.44z"
                  fill="#FFAECF" p-id="9515"></path>
              <path
                  d="M431.872 383.6416h256a61.44 61.44 0 0 1 61.44 61.44v117.76H370.6368v-117.76a61.44 61.44 0 0 1 61.2352-61.44z"
                  fill="#FFAECF" p-id="9516"></path>
              <path d="M945.152 831.5392H78.848a15.36 15.36 0 0 1 0-30.72h866.304a15.36 15.36 0 0 1 0 30.72z"
                    fill="#8E5178" p-id="9517"></path>
              <path
                  d="M661.1456 998.4H362.8544a15.36 15.36 0 0 1-15.36-15.36v-35.0208a32.9728 32.9728 0 0 1 32.9216-32.9216 82.3808 82.3808 0 0 0 82.2784-82.2784v-16.384a15.36 15.36 0 0 1 15.36-15.36h67.8912a15.36 15.36 0 0 1 15.36 15.36v16.384a82.3808 82.3808 0 0 0 82.2784 82.2784 32.9728 32.9728 0 0 1 32.9216 32.9216V983.04a15.36 15.36 0 0 1-15.36 15.36z m-282.9312-30.72h267.5712v-19.6608a2.2016 2.2016 0 0 0-2.2016-2.2016 113.1008 113.1008 0 0 1-112.9984-112.9984v-1.024h-37.1712v1.024a113.1008 113.1008 0 0 1-112.9984 112.7424 2.2016 2.2016 0 0 0-2.2016 2.2016z"
                  fill="#8E5178" p-id="9518"></path>
              <path
                  d="M776.0384 831.5392H247.9616a15.36 15.36 0 0 1-15.36-15.36v-153.6a76.8 76.8 0 0 1 76.8-76.8h405.6064a76.8 76.8 0 0 1 76.8 76.8v153.6a15.36 15.36 0 0 1-15.7696 15.36z m-512.7168-30.72h497.3568v-138.24a46.08 46.08 0 0 0-46.08-46.08H309.1968a46.08 46.08 0 0 0-46.08 46.08z"
                  fill="#8E5178" p-id="9519"></path>
              <path
                  d="M701.1328 616.5504H322.8672a15.36 15.36 0 0 1-15.36-15.36v-117.76a76.8 76.8 0 0 1 76.8-76.8h256a76.8 76.8 0 0 1 76.8 76.8v117.76a15.36 15.36 0 0 1-15.9744 15.36z m-362.9056-30.72h347.5456v-102.4a46.08 46.08 0 0 0-46.08-46.08H384a46.08 46.08 0 0 0-46.08 46.08z"
                  fill="#8E5178" p-id="9520"></path>
              <path
                  d="M641.3312 437.4528H382.6688a15.36 15.36 0 0 1-15.36-15.36V336.2304a76.8 76.8 0 0 1 76.8-76.8h136.192a76.8 76.8 0 0 1 76.8 76.8v85.8624a15.36 15.36 0 0 1-15.7696 15.36z m-243.3024-30.72h227.9424V336.2304a46.08 46.08 0 0 0-46.08-46.08H443.904a46.08 46.08 0 0 0-46.08 46.08z"
                  fill="#8E5178" p-id="9521"></path>
              <path
                  d="M845.5168 831.5392H178.4832a15.36 15.36 0 0 1-15.36-15.36V374.7328a348.8768 348.8768 0 0 1 697.7536 0v441.4464a15.36 15.36 0 0 1-15.36 15.36z m-651.6736-30.72h636.3136V374.7328a318.1568 318.1568 0 0 0-636.3136 0z"
                  fill="#8E5178" p-id="9522"></path>
              <path
                  d="M512 290.3552a15.36 15.36 0 0 1-10.24-3.6352c-2.1504-1.8944-53.504-46.6432-74.6496-77.5168a69.5808 69.5808 0 0 1-5.9392-71.68 58.368 58.368 0 0 1 52.5824-31.1296 51.2 51.2 0 0 1 38.0416 15.36 51.2 51.2 0 0 1 38.0416-15.36 58.2144 58.2144 0 0 1 52.5312 31.1296 69.4272 69.4272 0 0 1-5.888 71.68c-21.1456 30.72-72.4992 75.6224-74.6496 77.5168a15.36 15.36 0 0 1-9.8304 3.6352z m-38.0416-153.2416a27.392 27.392 0 0 0-25.6 14.7456 38.9632 38.9632 0 0 0 4.096 39.8848c13.6704 19.968 43.6736 48.3328 59.392 62.6688 15.7184-14.336 45.7216-42.7008 59.392-62.6688a38.9632 38.9632 0 0 0 4.096-39.8848 27.392 27.392 0 0 0-25.6-14.7456 22.9376 22.9376 0 0 0-22.9888 18.8416 15.36 15.36 0 0 1-15.36 12.2368 15.36 15.36 0 0 1-14.9504-12.4416 22.8864 22.8864 0 0 0-22.4768-18.6368zM600.576 537.1392a44.9536 44.9536 0 0 1-32.5632-14.1312c-5.12-4.6592-6.9632-6.144-11.8784-6.144s-6.7584 1.4848-11.8272 6.144a44.5952 44.5952 0 0 1-65.1264 0c-5.12-4.6592-6.9632-6.144-11.8784-6.144s-6.7584 1.4848-11.8272 6.144a44.5952 44.5952 0 0 1-65.1264 0c-5.12-4.6592-6.9632-6.144-11.8784-6.144a15.36 15.36 0 0 1 0-30.72 44.9536 44.9536 0 0 1 32.5632 14.1312c5.12 4.6592 6.9632 6.144 11.8784 6.144s6.7584-1.4848 11.8272-6.144a44.5952 44.5952 0 0 1 65.1264 0c5.12 4.6592 6.9632 6.144 11.8784 6.144s6.7584-1.4848 11.8272-6.144a44.5952 44.5952 0 0 1 65.1264 0c5.12 4.6592 6.9632 6.144 11.8784 6.144s6.7584-1.4848 11.8784-6.144A44.8512 44.8512 0 0 1 645.12 486.4a15.36 15.36 0 0 1 0 30.72c-5.12 0-6.7584 1.4848-11.8784 6.144a44.8512 44.8512 0 0 1-32.6656 13.8752z"
                  fill="#8E5178" p-id="9523"></path>
            </svg>
            <span style="font-weight: 700">下午号源</span>
          </div>
          <template v-for="(item,index) in after" :key="index">
            <div class="af-dct">
              <div class="left">
                <div class="position">{{ item.title }} | {{ item.docname }}</div>
                <div class="desc">{{ item.skill }}</div>
              </div>
              <div class="right">
                <span class="money">￥{{ item.amount }}</span>
                <el-button type="primary" @click="registerSetUp2(item)">剩余{{ item.availableNumber }}</el-button>
              </div>
            </div>

          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.register-setup {
  .line {
    margin: 0 5px;
  }

  .item {
    flex-direction: column;
    width: 140px;
    border: 1px solid lightskyblue;

    .up {
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: lightskyblue;

      &.active {
        background-color: #cccccc;
      }
    }

    .bottom {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .register-card {
    display: flex;
    flex-wrap: wrap;

    .item {
      margin-right: 10px;
      cursor: pointer;
      transition: all ease-in 0.5s;

      &.active {
        transform: scale(1.1);
      }
    }
  }

  .content {
    text-align: center;
  }

  .page {
    display: flex;
    justify-content: center;
  }
}


.doctor-info {

  .future {
    text-align: center;
    color: red;

    h2 {
      span {
        color: aqua;
      }
    }
  }


  .morning {
    .tops {
      display: flex;
      align-items: center;
    }
  }

  .dct {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 10px;
    margin-bottom: 10px;

    .left {
      .position {
        font-weight: 700;
        font-size: 18px;
        color: lightskyblue;
        margin-bottom: 4px;
      }
    }

    .right {
      .money {
        margin-right: 50px;
      }
    }
  }

  .after {
    margin-top: 10px;

    .af-tops {
      display: flex;
      align-items: center;
    }
  }

  .af-dct {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 10px;
    margin-bottom: 10px;

    .left {
      .position {
        font-weight: 700;
        font-size: 18px;
        color: lightskyblue;
        margin-bottom: 4px;
      }
    }

    .right {
      .money {
        margin-right: 50px;
      }
    }
  }
}
</style>
